<template>
  <div class="cylksh-vue">
    <!-- 标题 -->
    <h2 class="section-title">溯源概览</h2>
    <el-row :gutter="24"> 
      <!-- 种植/养殖环节 -->
      <el-col :span="6"> <!-- 24栅格系统，4列平分则每列span=6 -->
        <div class="stat-card stat-card2">
          <div class="card-header gaodu">
            
              <!-- 绿色叶子图标 -->
            <svg t="1754107155219" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2699" data-spm-anchor-id="a313x.search_index.0.i1.17a83a81z5qBtx" width="40" height="40"><path d="M518.826667 85.504c-14.08-2.432-29.482667 3.413333-39.936 16-205.226667 246.186667-265.386667 372.906667-265.386667 538.666667a298.666667 298.666667 0 1 0 597.333333 0c0-60.842667-13.568-107.392-43.946666-155.989334-13.056-20.906667-78.08-106.453333-96-133.376C626.773333 284.672 588.8 211.2 552.234667 113.493333a44.245333 44.245333 0 0 0-33.365334-27.989333z m-107.946667 343.978667c10.410667-3.328 21.546667-4.053333 32 1.365333a42.581333 42.581333 0 0 1 18.645333 57.344c-27.989333 54.144-37.162667 106.666667-33.322666 150.613333a42.965333 42.965333 0 0 1-38.656 46.677334 42.965333 42.965333 0 0 1-46.677334-38.656c-5.205333-59.562667 6.997333-128.341333 42.666667-197.333334 5.418667-10.453333 14.933333-16.682667 25.344-20.053333z" fill="#2e7d32" p-id="2700" data-spm-anchor-id="a313x.search_index.0.i0.17a83a81z5qBtx" class="selected"></path></svg>
            <div>
                <div class="card-title">种植/养殖环节</div>
                <p class="status">正常</p>
            </div>
            
          </div>
          <div class="card-value">8,526 <p class="cyjd">参与节点</p></div>
        </div>
      </el-col>

      <!-- 加工环节 -->
      <el-col :span="6">
        <div class="stat-card stat-card2">
          <div class="card-header gaodu">
            <!-- 绿色建筑图标 -->
            <svg t="1754062108187" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="25221" width="40" height="40"><path d="M426.666667 431.402667V42.666667l469.333333 256v597.333333H128V298.666667l298.666667 132.736z" fill="#2e7d32" p-id="25222"></path></svg>
            <div>
            <div class="card-title">加工环节</div>
            <p class="status">正常</p>
            </div>
          </div>
          <div class="card-value">326 <p class="cyjd">参与节点</p></div>
        </div>
      </el-col>

      <!-- 物流运输 -->
      <el-col :span="6">
        <div class="stat-card stat-card2">
          <div class="card-header gaodu">
            <!-- 物流车 -->
            <svg t="1754107282771" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6337" width="40" height="40"><path d="M736.40011852 322.6130963H587.73048889c-7.76722963 0-14.19946667-6.31087408-14.19946667-14.19946667v-8.73813333c0-30.21937778-24.51531852-54.7346963-54.7346963-54.7346963H177.28094815c-30.21937778 0-54.7346963 24.51531852-54.7346963 54.7346963v315.78642962c0 30.21937778 24.51531852 54.7346963 54.7346963 54.7346963h13.47128888c0 51.33653333 41.74885925 93.08539259 93.0853926 93.08539259s93.08539259-41.74885925 93.08539259-93.08539259h292.48474075c0 51.33653333 41.74885925 93.08539259 93.08539258 93.08539259s93.08539259-41.74885925 93.0853926-93.08539259h75.73048888c7.76722963 0 14.19946667-6.31087408 14.19946667-14.19946667V531.9642074c0-3.76225185-1.45635555-7.40314075-4.12634073-10.07312593L746.47324445 326.8608c-2.66998518-2.66998518-6.31087408-4.2477037-10.07312593-4.2477037z m-395.64325927 347.70488888c0 31.31164445-25.48622222 56.79786667-56.79786666 56.79786667s-56.79786667-25.48622222-56.79786667-56.79786667c0-31.31164445 25.48622222-56.79786667 56.79786667-56.79786666s56.79786667 25.48622222 56.79786666 56.79786666z m478.7768889 0c0 31.31164445-25.48622222 56.79786667-56.79786667 56.79786667s-56.79786667-25.48622222-56.79786666-56.79786667c0-31.31164445 25.48622222-56.79786667 56.79786666-56.79786666s56.79786667 25.48622222 56.79786667 56.79786666z m57.6474074-133.25653333H653.99466667c-7.76722963 0-14.19946667-6.31087408-14.19946667-14.19946667V374.55644444c0-7.76722963 6.31087408-14.19946667 14.19946667-14.19946667h74.75958518c3.76225185 0 7.40314075 1.45635555 10.07312593 4.12634075L887.13291852 512.91022222c2.66998518 2.66998518 4.12634075 6.31087408 4.12634073 10.07312592 0 7.76722963-6.31087408 14.0781037-14.0781037 14.07810371z" p-id="6338" fill="#2e7d32"></path></svg>
            <div>
            <div class="card-title">物流运输</div>
            <p class="status">正常</p>
            </div>
          </div>
          <div class="card-value">1,203 <p class="cyjd">参与节点</p></div>
        </div>
      </el-col>

      <!-- 销售终端 -->
      <el-col :span="6">
        <div class="stat-card2">
          <div class="card-header gaodu">
            
              <!-- 商店图标 -->
            <svg t="1754107384037" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7520" width="40" height="40"><path d="M243.2 704h537.6V521.6a35.2 35.2 0 0 1 35.2-35.2h6.4a35.2 35.2 0 0 1 35.2 35.2v339.2a35.072 35.072 0 0 1-3.2576 14.8032A51.2192 51.2192 0 0 1 806.4 908.8H217.6a51.2192 51.2192 0 0 1-47.9424-33.1968A35.072 35.072 0 0 1 166.4 860.8v-339.2a35.2 35.2 0 0 1 35.2-35.2h6.4a35.2 35.2 0 0 1 35.2 35.2V704z m677.7472-358.4l-0.1152 0.1984c0.512 4.128 0.768 8.3328 0.768 12.6016 0 56.5568-45.8432 102.4-102.4 102.4s-102.4-45.8432-102.4-102.4c0 56.5568-45.8432 102.4-102.4 102.4s-102.4-45.8432-102.4-102.4c0 56.5568-45.8432 102.4-102.4 102.4s-102.4-45.8432-102.4-102.4c0 56.5568-45.8432 102.4-102.4 102.4s-102.4-45.8432-102.4-102.4c0-4.3328 0.2688-8.608 0.7936-12.8h817.7536z m-3.2512-38.4H112.0256l47.8336-155.8272A51.2 51.2 0 0 1 208.8 115.2h612.0832a51.2 51.2 0 0 1 48.9408 36.16L917.696 307.2z" fill="#2e7d32" p-id="7521" data-spm-anchor-id="a313x.search_index.0.i6.17a83a81z5qBtx" class="selected"></path></svg>
            <div>
            <div class="card-title">销售终端</div>
            <p class="status">正常</p>
            </div>
          </div>
          <div class="card-value">86.5 <p class="cyjd">参与节点</p> </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {

}
</script>

<style>
.cylksh-vue{
    padding: 30px 60px; /* 与父容器保持间距 */
    background-color: #ffffff;
    /* overflow-x: hidden; */
}

.status{
    text-align: left;
    font-weight: 500;
    color: #3bc95f;
}
.cyjd{
    font-size: 16px;
    color: gray;
}
.stat-card2 {
  background: #fff;
  border-radius: 8px;
  padding: 20px;
  border: 1px solid rgba(128, 128, 128, 0.274);
}

.gaodu{
    margin: 20px 0;
}

</style>